{% extends "account/base.html" %}

{% load i18n %}
{% load avatar_tags %}

{% block head_title %}{% trans "Avatar" %}{% endblock %}

{% block jquery_src %}{{ STATIC_URL }}js/jquery.min.js{% endblock %}

{% block extra_head%}
    <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/imgareaselect-default.css" />
    <script type="text/javascript" src="{{ STATIC_URL }}js/imgsel.js"></script>
    <script type="text/javascript" src="{{ STATIC_URL }}js/icon.js"></script>
{% endblock %}

{% block body %}
    <h1>{% trans "Avatar" %}</h1>
    <h3>{% trans "Here is your current avatar:" %}</h3>
    {% avatar user 80 %}
    
    <p>
    <h3>Prreview Your Avatar:</h3>
     <div style="float:left;overflow:hidden;width:300px;height:300px;border:1px solid #f0f0f0"> 
        {% avatar_orig user 300 "bigimg" %}
    </div>

    <div style="float:left;overflow:hidden;width:80px;height:80px;border:1px solid #f0f0f0"> 
        {% avatar_orig user 80 "preimg" %}
    </div>
    </p>

    {% if not avatar %}
        <h3>Your avatar is currently the one found on <a href="http://www.gravatar.com/">Gravatar</a>, but you can upload a custom avatar just for this site!  To do so, simply use the form below.</h3>
    {% endif %}
 
    <p>
    <form enctype="multipart/form-data" method="POST" action="">
        {% csrf_token %}
        <label for="avatar">{% trans "Upload an Avatar:" %}</label>
        <input type="file" name="avatar" value="{% trans "Avatar Image" %}" />
        <input type="submit" name="img_upload" value="{% trans "Upload New Image" %}" />
    </form>
    </p>

    <form enctype="multipart/form-data" method="POST" action="">
        {% csrf_token %}
        <input type="hidden" id="imgpos" name="img_pos" value="0_0_0_0" /> 
        <input type="submit" name="img_cut" value="Save Cut" /> 
        <a href="edit">cancel</a> 
    </form> 


{% endblock %}
{% block extra_body %}
    {% load jquery_validation %}
    {% include_validation %}
    <script type="text/javascript">
       <!-- nothing here -->
    </script>
{% endblock %}

